<template>
	<view class="">
		<tn-nav-bar fixed :isBack="true" :bottomShadow="false">搜索列表</tn-nav-bar>
		<view class='container' :style="{paddingTop: vuex_custom_bar_height + 'px'}">
			<view class="view_sousuo" @tap="go_sousuo">
				<view class="view_sousuo_input">
					<view class="view_sousuo_input_item" v-for="(item,index) in keys_arr">
						<text>{{item}}</text>
						<image src="../../static/resource/icon_sousuo_close.png" @tap="del_key(index)">
						</image>
					</view>
				</view>
			</view>
			<scroll-view class='goods_fenlei' scrollWithAnimation="true" scroll-x="true">
				<text :class="cur_fenlei_index==-1?'goods_fenlei_item_active':'goods_fenlei_item'" data-index='-1'
					@tap='switchFenlei' :style='{color:mlib_style.fontcolor}'>全部</text>
				<text v-for="(item,index) in fenlei_muban"
					:class="cur_fenlei_index==index?'goods_fenlei_item_active':'goods_fenlei_item'" :data-index='index'
					@tap='switchFenlei' :style='{color:mlib_style.fontcolor}'>{{item.fenlei.name}}</text>
			</scroll-view>
			<view class="jieguo_title">
				<view :class="cur_show_status==0?'jieguo_title_selection':'jieguo_title_selection_off'"
					@tap="change_show_status" data-status="0">最新</view>
				<view class="jieguo_title_xian"></view>
				<view :class="cur_show_status==1?'jieguo_title_selection':'jieguo_title_selection_off'"
					@tap="change_show_status" data-status="1">最热</view>
				<view class="jieguo_title_num">{{cur_show_mubans.length}}个模板</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		search
	} from '@/api/poster/index.js'
	export default {
		data() {
			return {
				cur_fenlei_index: -1,
				cur_show_status: 0,
				keys: '测试',
				keys_arr: [],
				all_muban: [],
				fenlei_muban: [],
				cur_show_mubans: [],
				setting: null,
				//下载图片临时参数
				cur_down_index: 0,
				pics_down: [],
				downing: 0,
				cur_down_index: 0,
				//
				cur_down_muban: null,
				wenan_show_status: 0,
				wenan_user_info: null,
				sys_ios: 1,
				jili: null,
				category_id:0,
				orderby:1
			}
		},
		onLoad: function(options) {
			if (options.key != null) {
				options.key.replace(/(^\s*)|(\s*$)/g, "");
				this.keys = options.key;
			}
			this.keys_arr = this.keys.split(" ");
			this.getsearch(options)
		},
		onShow() {

		},
		methods: {
			getsearch(){
				search({
					title:this.keys,
					category_id:this.category_id,
					orderby:this.orderby
				}).then(res=>{
					console.log(76,res)
				})
			},
			change_show_status: function(e) {
				this.cur_show_status = e.currentTarget.dataset.status
				if (this.cur_show_status == 1) {
					let cur_show_mubans_temp = this.cur_show_mubans;
					cur_show_mubans_temp.sort(function(a, b) {
						return b.download - a.download;
					})
					this.cur_show_mubans = cur_show_mubans_temp;
				} else {
					let cur_show_mubans_temp = this.cur_show_mubans;
					cur_show_mubans_temp.sort(function(a, b) {
						return b.id - a.id;
					})
					this.cur_show_mubans = cur_show_mubans_temp;
				}
			},
			/**
			 * 删除搜索关键字
			 */
			del_key: function(key) {
				var keys_arr = this.keys_arr;
				var has_shanchu = 0;
				for (var i = 0; i < keys_arr.length; ++i) {
					if (keys_arr[i] == key) {
						has_shanchu = 1;
						keys_arr.splice(i, 1);
						break;
					}
				}
				if (has_shanchu == 1) {
					if (keys_arr.length == 1) {
						this.keys = keys_arr[0];
					} else {
						var keys = keys_arr[0];
						for (var i = 1; i < keys_arr.length; ++i) {
							keys += ' ' + keys_arr[i];
						}
						this.keys = keys;
					}
					this.keys_arr = keys_arr
					// this.inite();
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 750rpx;
		height: 100%;
		position: absolute;
		left: 0rpx;
		right: 0rpx;
		margin-bottom: 50rpx;
	}

	.jieguo_kong_view {
		margin-top: 144rpx;
		width: 750rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}

	.jieguo_kong_view image {
		width: 416rpx;
		height: 274rpx;
		margin-bottom: 60rpx;
	}

	.jieguo_kong_view view {
		font-size: 30rpx;
		font-family: SimHei;
		font-weight: 400;
		color: rgba(151, 151, 151, 1);
	}

	.view_sousuo {
		width: 700rpx;
		height: 64rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		position: relative;
		margin-left: 15rpx;
		margin-top: 15rpx;
	}

	.view_sousuo_icon {
		width: 80rpx;
		height: 52rpx;
	}

	.view_sousuo_input {
		width: 690rpx;
		height: 64rpx;
		background: rgba(240, 239, 239, 1);
		border-radius: 30rpx;
		padding-left: 9rpx;
		padding-right: 9rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.view_sousuo_input_item {
		height: 46rpx;
		border-radius: 23rpx;
		background-color: white;
		padding: 0 20rpx 0 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-right: 10rpx;
	}

	.view_sousuo_input_item image {
		width: 12rpx;
		height: 12rpx;
		margin-left: 20rpx;
	}

	.view_sousuo_input_item text {
		font-size: 22rpx;
		font-family: SimHei;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}

	.jieguo_title {
		width: 720rpx;
		position: relative;
		left: 15rpx;
		margin-top: 26rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.jieguo_title_selection {
		width: 125rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 10rpx;
		margin-right: 15rpx;
		font-size: 28rpx;
		background-color: rgb(239, 239, 239);
		color: black;

	}

	.jieguo_title_selection_off {
		width: 125rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 10rpx;
		background-color: white;
		color: rgb(111, 111, 111);
		margin-right: 15rpx;
		font-size: 28rpx;
	}

	.jieguo_title_num {
		position: absolute;
		height: 60rpx;
		line-height: 60rpx;
		right: 0rpx;
		top: 0rpx;
		font-size: 22rpx;
		font-family: SimHei;
		font-weight: 400;
		color: rgba(151, 151, 151, 1);
	}

	.goods_fenlei {
		width: 700rpx;
		height: 44rpx;
		overflow: hidden;
		white-space: nowrap;
		position: relative;
		display: block;
		margin-left: 15rpx;
		margin-top: 35rpx;
	}

	.goods_fenlei_item {
		display: inline-block;
		height: 46rpx;
		line-height: 46rpx;
		text-align: center;
		padding-right: 17rpx;
		padding-left: 17rpx;
		background: rgba(249, 249, 249, 1);
		border-radius: 10rpx;
		font-size: 24rpx;
		font-family: SimHei;
		font-weight: 400;
		color: rgba(96, 96, 96, 1);
		margin-right: 24rpx;
	}

	.goods_fenlei_item_active {
		display: inline-block;
		height: 46rpx;
		line-height: 46rpx;
		text-align: center;
		padding-right: 17rpx;
		padding-left: 17rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
		font-family: SimHei;
		font-weight: 400;
		margin-right: 24rpx;
		color: #fff;
		background-color: #0083fd;
	}

	.tuijian_content {
		width: 750rpx;
		position: relative;
		left: 0rpx;
		margin-top: 30rpx;
	}

	.lunbotu_view {
		width: 700rpx;
		height: 240rpx;
		/* background-color: rgb(243, 216, 168); */
		position: relative;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-top: 20rpx;
	}

	.top_lunbo {
		width: 700rpx;
		height: 230rpx;
		border-radius: 10rpx;
	}

	.top_lunbo image {
		width: 700rpx;
		height: 230rpx;
		border-radius: 10rpx;
	}

	.wenan_view {
		width: 700rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.wenan_view-flex {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.wenan_item {
		width: 700rpx;
		position: relative;
		padding-top: 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
	}

	.wenan_view-flex .hr {
		width: 100vw;
		border: 1rpx solid rgba(240, 240, 240, 0.5);
		margin: 10rpx 0;
	}

	.wenan_tx {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.wenan_right {
		width: 590rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
	}

	.wenan_right_top {
		height: 80rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.wenan_right_top_left {
		width: 450rpx;
		height: 80rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		overflow: hidden;
	}

	.wenan_nickname {
		height: 30rpx;
		line-height: 30rpx;
		color: #000;
		font-size: 30rpx;
		margin-bottom: 15rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-weight: 600;
	}

	.wenan_date {
		height: 26rpx;
		line-height: 26rpx;
		color: rgb(138, 138, 138);
		font-size: 26rpx;
	}

	.wenan_right_top_right {
		width: 150rpx;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		white-space: nowrap;
	}

	.wenan_right_top_right image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.wenan_right_top_right view {
		height: 30rpx;
		line-height: 30rpx;
		color: rgb(104, 104, 104);
		letter-spacing: 2rpx;
		font-size: 26rpx;
	}

	.wenan_right_content {
		width: 610rpx;
		white-space: pre-wrap;
		color: black;
		line-height: 45rpx;
		font-size: 30rpx;
		letter-spacing: 2rpx;
		margin: 10rpx 0;
	}

	.img_view {
		width: 630rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.img_view image {
		width: 300rpx;
	}

	.pics_view {
		width: 630rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.pics_view image {
		width: 190rpx;
		height: 190rpx;
		margin-right: 20rpx;
		border-radius: 10rpx;
	}

	.wenan_btns {
		width: 100%;
		height: 35rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 30rpx;
		margin-bottom: 25rpx;
	}

	.btns_item {
		width: 210rpx;
		height: 35rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		position: relative;
	}

	.btn_share {
		width: 210rpx;
		height: 35rpx;
		position: absolute;
	}

	.btns_item image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 13rpx;
	}

	.btns_item view {
		font-size: 28rpx;
		color: rgb(127, 127, 127);
	}

	.btn_tougao {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		overflow: hidden;
		position: fixed;
		right: 30rpx;
		bottom: 50rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 999;
		background-color: rgb(76, 76, 76);
	}

	.btn_tougao image {
		width: 27rpx;
		height: 27rpx;
		margin-bottom: 15rpx;
	}

	.btn_tougao view {
		color: white;
		font-size: 23rpx;
		height: 23rpx;
		line-height: 23rpx;
	}

	.btn_gongxian {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		overflow: hidden;
		position: fixed;
		right: 30rpx;
		bottom: 170rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 999;
		background-color: rgb(254, 152, 5);
	}

	.btn_gongxian image {
		width: 35rpx;
		height: 35rpx;
		margin-bottom: 10rpx;
	}

	.btn_gongxian view {
		color: white;
		font-size: 23rpx;
		height: 23rpx;
		line-height: 23rpx;
	}

	.select_back_view {
		width: 750rpx;
		height: 100%;
		position: absolute;
		left: 0rpx;
		top: 379rpx;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 98;
	}

	.select_view {
		width: 750rpx;
		position: relative;
		margin-top: 30rpx;
		z-index: 99;
		background-color: white;
	}

	.select_view_guding {
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		margin-top: 0rpx;
	}

	.select_title {
		width: 700rpx;
		height: 60rpx;
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding-bottom: 20rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.select_title_item {
		width: 125rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 10rpx;
		background-color: white;
		color: rgb(111, 111, 111);
		margin-right: 15rpx;
		font-size: 28rpx;
	}

	.select_title_item_on {
		background-color: rgb(239, 239, 239);
		color: black;
	}

	.select_fenlei {
		width: 142rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		position: absolute;
		right: 0rpx;
		background-color: rgb(239, 239, 239);
		color: rgb(114, 114, 114);
		font-size: 30rpx;
		border-radius: 10rpx;
	}

	.select_fenlei_body {
		width: 700rpx;
		position: relative;
		left: 20rpx;
	}

	.select_fenlei_body_top {
		width: 730rpx;
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
	}

	.select_fenlei_item {
		width: 122rpx;
		text-align: center;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 26rpx;
		border-radius: 10rpx;
		border: 2rpx solid rgb(199, 199, 199);
		color: #000000;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}

	.select_fenlei_item_on {
		background-color: #0083fd;
		color: #fff;
	}

	.select_fenlei_btns {
		width: 750rpx;
		height: 90rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		position: relative;
		left: -20rpx;
	}

	.select_fenlei_btns_left {
		width: 373rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		border-top: 2rpx solid rgba(199, 199, 199, 0.2);
	}

	.select_fenlei_btns_right {
		width: 375rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		color: #fff;
		background-color: #0083fd;
	}
</style>